{% macro input() %}
<div class="create-blog">              
  <div>
    <textarea name="" id="blog-content" rows="3"></textarea>
  </div>
  <button id="btn-publish" class="btn btn-primary">发表</button>
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-image" fill="currentColor"
    xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd"
      d="M14.5 3h-13a.5.5 0 0 0-.5.5v9c0 .013 0 .027.002.04V12l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094L15 9.499V3.5a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13zm4.502 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
  </svg>
  <!-- 实现图片上传 -->
  <input type="file" id="file-img" />
  <!--  input 作用是存放图片上传后的url地址  -->
  <input type="hidden" value="" id="file-img-url" />
  <a href="" id="img-upload">插入一张图片</a>
  <!-- 上传成功后的提示信息 -->
  <span class="img-info"></span>
              
</div>
<script>
  $("#img-upload").click(function (e) {
    e.preventDefault();
    // 触发$("#file-img")jquery 对象的点击事件
    $("#file-img").click();
  });
  // 图片上传 $('file-img')input 标签
  $("#file-img").change(function () {
    //获取到图片信息
    const file = $(this)[0].files[0];
    ajax.upload("/api/uploadImg", file, function (err, data) {
      if (err) {
        alert(err);
        return;
      }
      // console.log(data)
      $(".img-info").text(file.name);
      $("#file-img-url").val(data.url);
    });
  });
  $("#btn-publish").click(function (e) {
    e.preventDefault();
    const content = $("#blog-content").val();
    const image = $("#file-img-url").val();
    if (!content) {
      alert("发表的内容不能为空");
      return;
    }
    const data = { content };

    if (image) { //如果上传图片
      data.image = image
    }
    ajax.post("/api/blog/createBlog", data, function (err, data) {
      if (err) {
        alert(err);
        return
      }
      alert("发表成功")
      // 刷新页面
      location.href = "";
      console.log(data)
    })
  })
  //@功能
  $('#blog-content').atwho({
    at: "@",
    data: '/api/user/getAtList',
  })

</script>
{% endmacro %}